<template>
  <div>
    <!--  头部  -->
    <header>
      <nav-top :classId="indexId"></nav-top>
    </header>
    <section v-if="item">
      <!--   主体界面   -->
      <div class="main">
        <!--    文章界面    -->
        <div class="content">
          <div
            class="item"
            v-for="(item, content_index) in item"
            :key="content_index"
          >
            <router-link to="/articleInfo">
              <h3>{{ item.title }}</h3>
            </router-link>
            <div class="content-items">
              <div class="user-info-card">
                <img :src="$img + item.avatar" alt="" />
                <span>{{ item.nickname }}，</span>
                <span>{{ item.industry_name }}</span>
              </div>
              <el-row :gutter="20" :type="item.flexType" align="middle">
                <el-col :span="item.colNum">
                  <div class="main-content">
                    <div
                      @click="showContent(content_index)"
                      v-html="item.isShow ? item.text : item.countNew"
                    >
                      <!--<button v-show="!item.isShow" @click="showContent(index)">阅读全文<i class="el-icon-arrow-down"></i></button>-->
                    </div>
                  </div>
                </el-col>
                <el-col :span="item.colRightNum" v-if="item.img">
                  <div class="is-video">
                    <img
                      @click="showContent(content_index)"
                      :src="$img + item.img"
                      alt=""
                    />
                    <span
                      class="article-content"
                      v-show="item.isShow"
                      v-html="item.articleContent"
                    ></span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="item-operating">
              <div @click="changeLike(content_index)">
                <i
                  class="icon"
                  :class="[item.isClick ? 'icon-liked' : 'icon-like']"
                ></i
                >{{ item.islike }}
              </div>
              <div @click="showComment(content_index, item.type, item.id)">
                <i class="icon icon-comment"></i>
                {{ item.isComment ? "收起评论" : item.comment + "条评论" }}
              </div>
              <div @click="toggleShare(content_index, item.link)">
                <i class="icon icon-share"></i>分享
              </div>
              <div><i class="icon icon-collection"></i>收藏</div>
              <div><i class="icon icon-dislike"></i>踩</div>
              <div @click="toggleMore(content_index)">
                <i class="el-icon-more"></i>
              </div>
              <div
                class="hide-content"
                @click="hideContent(content_index)"
                v-show="item.isShow"
              >
                收起<i class="el-icon-arrow-up"></i>
              </div>
            </div>
            <div
              class="comment-cover"
              v-show="item.isComment && content_index === indexNow"
            >
              <div class="comment-title">
                <h4>{{ item.comment }} 条评论</h4>
                <p><i class="icon-ctime"></i>切换为时间排序</p>
              </div>
              <div
                class="comment-content"
                v-for="(content_item, comment_index) in comment_item"
                :key="comment_index"
              >
                <div>
                  <div>
                    <img :src="$img + content_item.avatar" alt="" />
                    <span>{{ content_item.nickname }}</span>
                  </div>
                  <span>
                    {{ content_item.time
                    }}{{ content_item.time === "刚刚" ? "" : "前" }}
                  </span>
                </div>
                <div>
                  <p>
                    {{ content_item.text }}
                  </p>
                  <p>
                    <span>
                      <i class="icon-like"></i>{{ content_item.islike }}
                    </span>
                    <span @click="openComment(index)">
                      <i class="el-icon-chat-dot-round"></i>查看回复
                    </span>
                  </p>
                </div>
              </div>
              <div class="comment-pagination">
                <el-pagination
                  :page-size="20"
                  @current-change="handleCurrentChange"
                  @prev-click="afterPage"
                  @next-click="nextPage"
                  layout="prev, pager, next"
                  prev-text="上一页"
                  next-text="下一页"
                  :total="comment_count"
                >
                </el-pagination>
              </div>
            </div>
            <div class="cover">
              <transition name="fade">
                <div class="cover-share" v-if="item.isShare">
                  <div
                    class="copy-share-link"
                    @click="copy_link(content_index)"
                    data-clipboard-action="copy"
                    :data-clipboard-text="item.link"
                  >
                    <img src="../assets/images/copy-link.png" alt="" />复制链接
                  </div>
                  <div>
                    <img src="../assets/images/weibo.png" alt="" />新浪微博
                  </div>
                  <div>
                    <img src="../assets/images/wechat.png" alt="" />微信扫一扫
                  </div>
                  <div :id="'qrcode' + content_index + 1"></div>
                </div>
              </transition>
              <transition name="fade">
                <div class="cover-more" v-if="item.isMore">
                  <p>没有帮助</p>
                  <p>举报</p>
                </div>
              </transition>
            </div>
          </div>
          <div class="reply-cover" v-show="isShowComment">
            <div></div>
          </div>
        </div>
        <!--    右侧导航    -->
        <nav-right></nav-right>
      </div>
    </section>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import marked from "marked";
export default {
  name: "index",
  data() {
    return {
      indexId: 0,
      // 显示
      show_login: true,
      // 总页数
      comment_count: 0,
      // 评论显示弹框
      isShowComment: false,
      indexNow: null,
      item: null,
      comment_item: []
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    this.$axios({
      method: "POST",
      url: "api/Login_main/articlelist",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data: {
        page: 1,
        token: this.token
      }
    })
      .then(res => {
        let items = res.data.data;
        let itemIndex = JSON.parse(JSON.stringify(this.item));
        items.forEach((item, index) => {
          item.link = "www.baidu.com" + index;
          item.isShow = false; // 布局
          item.countNew = ""; // 省略文本
          item.isComment = false; // 展开评论
          item.isShare = false; // 分享
          item.isMore = false; // 更多
          item.colNum = 16; // 左边
          item.colRightNum = 8; // 右边
          item.likeNump = 0; // 数量显示
          item.flexType = "flex"; // layout布局
          item.pageStart = 0; // 数量显示
          item.pageCount = 2; // 数量显示
        });
        itemIndex = items;
        this.item = itemIndex;
        this.countWord();
        // console.log(this.item);
      })
      .catch(res => {
        console.log(res.msg);
      });
  },
  mounted() {},
  methods: {
    countWord: function() {
      let item = this.item;
      item.forEach(item => {
        item.text = marked(item.text);
        if (item.text.length > 50) {
          item.countNew =
            marked(item.text)
              .replace(/<[^>]+>/g, "")
              .slice(0, 100) + "...";
        } else {
          item.countNew = marked(item.text);
        }
        //计算有无图片时的初始布局
        if (item.isShow || !item.img) {
          item.colNum = 24;
        } else {
          item.colNum = 16;
        }
        //计算点赞数
        if (item.islike > 9999) {
          item.likeNump = (item.islike / 10000).toFixed(2).slice(0, 2) + "万";
        } else if (item.islike > 999) {
          item.likeNump = (item.islike / 1000).toFixed(2).slice(0, 3) + "千";
        } else {
          item.likeNump = item.islike;
        }
      });
      this.item = item;
    },
    //显示布局
    showContent: function(index) {
      this.item[index].isShow = true;
      this.item[index].colNum = 24;
      this.item[index].flexType = "";
      this.item[index].colRightNum = 24;
    },
    //收起
    hideContent: function(index) {
      this.item[index].isShow = false;
      this.item[index].type = "flex";
      if (this.item[index].isShow || !this.item[index].img) {
        this.item[index].colNum = 24;
      } else {
        this.item[index].colNum = 16;
        this.item[index].colRightNum = 8;
      }
    },
    //点赞
    changeLike(index) {
      this.item[index].isClick = !this.item[index].isClick;
      if (this.item[index].isClick) {
        this.item[index].islike++;
      } else {
        this.item[index].islike--;
      }
      this.countWord();
    },
    //评论
    showComment(index, type, id) {
      if (!this.item[index].isComment) {
        this.$axios({
          method: "POST",
          url: "api/Login_Main/CommentList",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          data: {
            token: localStorage.getItem("token"),
            page: 1,
            type: type,
            type_id: id
          }
        }).then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.comment_item = res.data.data.data;
            this.comment_count = res.data.data.count;
          } else {
            this.comment_item = [];
            this.comment_count = 0;
          }
        });
      }
      this.item[index].isComment = !this.item[index].isComment;
      this.indexNow = index;
    },
    //打开回复
    openComment(index) {
      this.isShowComment = false;
      console.log(index);
    },
    //更多
    toggleMore: function(index) {
      this.item[index].isMore = !this.item[index].isMore;
    },
    //分享
    toggleShare: function(index) {
      // console.log(this.item[index].isShare);
      this.item[index].isShare = !this.item[index].isShare;
      if (this.item[index].isShare) {
        this.$nextTick(() => {
          this.qrcode(index);
        });
        console.log(index, "二维码已经生成");
      } else {
        // qrcode.clear();
        console.log("二维码固定");
      }
    },
    //复制链接
    copy_link(index) {
      this.$message({
        message: "复制链接成功！",
        iconClass: "none",
        center: true,
        customClass: "tip-class",
        duration: 2000,
        offset: 120
      });
      //复制链接
      let clipboard = new this.clipboard(".copy-share-link");
      clipboard.on("success", function() {
        console.log(1);
      });
      clipboard.on("error", function() {
        console.log(2);
      });
      this.item[index].isShare = !this.item[index].isShare;
    },
    // 动态生成二维码
    qrcode(index) {
      // console.log(index);
      // eslint-disable-next-line no-unused-vars
      let qrcode = new QRCode("qrcode" + index + 1, {
        width: 100, // 设置宽度，单位像素
        height: 100, // 设置高度，单位像素
        text: this.item[index].link // 设置二维码内容或跳转地址
      });
      // qrcode.clear();
      // qrcode.makeCode(url);
    },
    // 页数
    handleCurrentChange(val) {
      console.log(val);
      // this.$axios({
      //   method: "POST",
      //   url: "api/Login_Main/CommentList",
      //   header: {
      //     "Content-Type": "application/x-www-form-urlencoded"
      //   },
      //   data: {
      //     token: localStorage.getItem("token"),
      //
      //     page: val
      //   }
      // }).then(res => {
      //   console.log(res);
      // });
    },
    // 前一页
    afterPage() {
      console.log();
    },
    // 后一页
    nextPage() {
      console.log();
    }
  },
  computed: {}
};
</script>

<style scoped lang="less">
/*头部*/
header {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(237, 237, 237, 0.4);
}
/*主体*/
section {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 15px;
  margin-top: 55px;
  background-color: #f6f6f6;
  .main {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    .content {
      width: 69%;
      height: 100%;
      border-radius: 2px;
      box-sizing: border-box;
      .item {
        padding: 25px;
        margin-bottom: 10px;
        border-radius: 2px;
        background-color: #fff;
        box-sizing: border-box;
        box-shadow: 0 1px 1px 0 rgba(237, 237, 237, 0.4);
        h3 {
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          &:hover {
            color: #175200;
            cursor: pointer;
          }
        }
        .content-items {
          color: #000;
          .user-info-card {
            display: flex;
            align-items: center;
            margin-top: 20px;
            cursor: pointer;
            img {
              width: 40px;
              height: 40px;
              margin-right: 15px;
            }
            span:nth-child(2) {
              font-size: 15px;
              font-weight: bold;
              color: #333;
            }
            span:nth-child(3) {
              font-size: 14px;
              color: #454545;
            }
          }
          .main-content {
            padding: 10px 0;
            div {
              font-size: 15px;
              line-height: 30px;
              &:hover {
                opacity: 0.9;
                cursor: pointer;
              }
            }
            button {
              padding: 0 15px;
              font-size: 14px;
              color: #175199;
              outline: none;
              background: none;
              border: none;
              cursor: pointer;
            }
          }
          .is-video {
            padding: 10px 0;
            /*border: 1px solid #000;*/
            img {
              width: 100%;
              height: 100%;
              cursor: pointer;
            }
            .article-content {
              font-size: 15px;
              line-height: 35px;
            }
          }
        }
        .item-operating {
          display: flex;
          align-items: center;
          width: 100%;
          color: #95998f;
          font-size: 15px;
          .hide-content {
            margin-left: auto;
          }
          div {
            display: flex;
            align-items: center;
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              opacity: 0.8;
            }
            .icon {
              display: inline-block;
              width: 15px;
              height: 15px;
              margin-right: 5px;
              vertical-align: middle;
              background-size: 100% 100%;
            }
          }
        }
        /* 评论 */
        .comment-cover {
          z-index: 1;
          position: relative;
          padding: 20px 10px;
          .comment-title {
            display: flex;
            justify-content: space-between;
            padding: 25px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);
            p {
              font-size: 14px;
              color: #95998f;
              cursor: pointer;
              i {
                display: inline-block;
                width: 16px;
                height: 14px;
                background-size: 100% 100%;
              }
            }
          }
          .comment-pagination {
            padding: 10px 0;
            text-align: center;
            border-radius: 4px;
            box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.52);
          }
          .comment-content {
            padding: 20px;
            box-shadow: 0 2px 5px 0 rgba(224, 224, 224, 0.33);
            & > div:first-child {
              display: flex;
              align-items: center;
              justify-content: space-between;
              div {
                display: flex;
                align-items: center;
                img {
                  width: 33px;
                  height: 33px;
                  margin-right: 10px;
                  cursor: pointer;
                }
                span {
                  font-size: 15px;
                  font-weight: bold;
                  color: #333;
                  cursor: pointer;
                }
              }
              span {
                font-size: 15px;
                color: #95998f;
              }
            }
            & > div:nth-child(2) {
              margin: 10px 40px;
              p:first-child {
                display: -webkit-box;
                margin: 10px 0;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
                font-size: 15px;
                color: #000;
              }
              p:nth-child(2) {
                display: flex;
                align-items: center;
                color: #95998f;
                font-size: 14px;
                & > span {
                  margin-right: 10px;
                  cursor: pointer;
                  .icon-like {
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;
                    background-size: 100% 100%;
                    cursor: pointer;
                  }
                  .el-icon-chat-dot-round {
                    margin-right: 3px;
                    font-size: 17px;
                    color: #777;
                  }
                }
              }
            }
          }
        }
        .cover {
          position: relative;
          .cover-share {
            z-index: 99;
            position: absolute;
            top: 25px;
            left: 110px;
            text-align: center;
            font-size: 14px;
            color: #95998f;
            background-color: #fff;
            box-shadow: 0 0 10px #eaeaea;
            &:before {
              z-index: 0;
              position: absolute;
              top: -15px;
              left: 55px;
              content: "";
              width: 0;
              border: solid;
              border-color: transparent transparent #fff transparent;
              border-width: 0 10px calc(10px * 1.732);
              text-shadow: 0 0 5px #333333;
            }
            div {
              display: flex;
              align-items: center;
              padding: 10px 15px;
              font-size: 14px;
              color: #95998f;
              cursor: pointer;
              &:hover {
                color: #6b9147;
                background-color: rgba(0, 0, 0, 0.05);
              }
              #qrcode {
                width: 100px;
                height: 100px;
              }
              img {
                width: 15px;
                height: 13px;
                margin-right: 10px;
              }
            }
            & > img {
              width: 100px;
              height: 100px;
            }
          }
          .cover-more {
            z-index: 1;
            position: absolute;
            top: 25px;
            left: 290px;
            width: 110px;
            font-size: 14px;
            color: #95998f;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 0 0 10px #eaeaea;
            cursor: pointer;
            &:before {
              z-index: 0;
              position: absolute;
              top: -15px;
              left: 50px;
              content: "";
              width: 0;
              border: solid;
              border-color: transparent transparent #fff transparent;
              border-width: 0 10px calc(10px * 1.732);
              text-shadow: 0 0 5px #333333;
            }
            p {
              padding: 10px 15px;
              &:hover {
                color: #6b9147;
                background-color: rgba(0, 0, 0, 0.05);
              }
            }
          }
        }
      }
      .reply-cover {
        z-index: 10000;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>
